<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<title>yo-card - 卡片</title>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no,email=no" />
<link rel="apple-touch-icon" href="../../yo.png" />
<link rel="shortcut icon" href="../../shortcut.png" />
<link rel="stylesheet" href="../../usage/export/yo-card.css" />
</head>
<body>

<div class="yo-flex">
    <header class="yo-header m-header">
        <h2 class="title">yo-card</h2>
        <a href="../index.html" class="regret yo-ico">&#xf07d;</a>
        <a href="../../doc/element.html#yo-card" class="affirm">文档</a>
    </header>
    <div class="flex">
        <section class="m-demo">
            <div class="yo-card">
                <h3 class="hd">标题</h3>
                <div class="bd">卡片是一种比常规列表更适合于信息控制和组织的形态。它更适用于处理拥有较为复杂内容的场景，比如一个涵盖有照片，描述和所有相关操作。</div>
                <div class="ft">
                    <span class="link">赞</span>
                    <span class="link">详情</span>
                </div>
            </div>

            <div class="yo-card">
                <div class="bd">卡片是一种比常规列表更适合于信息控制和组织的形态。它更适用于处理拥有较为复杂内容的场景，比如一个涵盖有照片，描述和所有相关操作。</div>
            </div>

            <div class="yo-card">
                <div class="extra">
                    <img class="img-cover" src="http://pic5.duowan.com/psp/1005/138297782616/138298560095.jpg" alt="示例图片" />
                </div>
                <div class="bd">
                    <h3 class="title">北京-巴厘岛4晚6天自由行</h3>
                    <p class="desc">往返机票含税+位置优越五星级酒店任选</p>
                </div>
            </div>

            <div class="yo-card">
                <div class="extra">
                    <img class="img-cover" src="http://pic5.duowan.com/psp/1005/138297782616/138298560095.jpg" alt="示例图片" />
                    <div class="img-desc">
                        <h3 class="title">北京-巴厘岛4晚6天自由行</h3>
                        <p class="desc">往返机票含税+位置优越五星级酒店任选</p>
                    </div>
                </div>
            </div>

            <div class="yo-card">
                <div class="extra">
                    <img class="img-cover" src="http://pic5.duowan.com/psp/1005/138297782616/138298560095.jpg" alt="示例图片" />
                </div>
                <div class="bd">
                    <span class="desc">Posted 2016.3.23</span>
                    <p>这里是正文内容...</p>
                </div>
                <div class="ft">
                    <span class="link">赞</span>
                    <span class="link">详情</span>
                </div>
            </div>

            <div class="yo-card">
                <h3 class="hd">标题：</h3>
                <div class="bd cols">
                    <img class="img-cover" src="http://pic5.duowan.com/psp/1005/138297782616/138298560095.jpg" alt="示例图片" />
                    <div class="flex">
                        <h4 class="title">项目标题</h4>
                        <p class="desc">这里是正文内容...</p>
                    </div>
                </div>
                <div class="ft">
                    <span>2015.3.23</span>
                    <span>5 评论</span>
                </div>
            </div>

        </section>

    </div>
</div>

</body>
</html>